<template>
  <div class="tmpl">
      <div class="cate">
        <ul id="cateul">
            <li>
                <a @click="getimglist(0)">全部</a>
            </li>
            <li v-for="item in catelist">
                <a @click="getimglist(item.id)">{{ item.title }}</a>
            </li>
         
        </ul>
      </div>


    <div class="imglist">
            <ul>
                <li v-for="item in list" class="imgbox">
                    <!-- <router-link v-bind='{to:"/photo/photoinfo/"+item.id}'> -->
                  <router-link v-bind='{to:"/photo/photoinfo"}'>
                    <img v-lazy="item.img_url">
                
                    <p>
                        <span class="imgtitle" v-text="item.title"></span><br>
                        {{ item.xhaiyao }}

                    </p>
                     </router-link>
                </li>
            </ul>



    </div>



  </div>
</template>

<script>
// //引用key
// import common from '../../kits/common.js';
import { Indicator } from 'mint-ui';

export default {
 		data(){
 			return{
                 catelist:[
                    {
                     title:'家居必备',
                     id:21
                    },   {
                     title:'美肤美容',
                     id:22
                    },   {
                     title:'旅游观光',
                     id:23
                    },   {
                     title:'洗衣护扶',
                     id:24
                    },   {
                     title:'洗衣护扶',
                     id:24
                    },   {
                     title:'洗衣护扶',
                     id:24
                    },   {
                     title:'洗衣护扶',
                     id:24
                    }


                 ],
                 list:[
                        {
                         id:21,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/129.jpg',
                         xhaiyao:'在炎炎的夏日中，西瓜是人们最喜欢吃的一种水果，清甜凉爽的感觉，让人非常舒服。但是，有人说吃西瓜会导致肥胖，甚至说，吃一个西瓜就相当于吃了六碗的米饭，这是真的吗？吃西瓜会胖吗?下面就来为大家解答下吧。'
                     },  {
                         id:22,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/117.jpg',
                         xhaiyao:'在炎炎的夏日中，西瓜是人们最喜欢吃的一种水果，清甜凉爽的感觉，让人非常舒服。但是，有人说吃西瓜会导致肥胖，甚至说，吃一个西瓜就相当于吃了六碗的米饭，这是真的吗？吃西瓜会胖吗?下面就来为大家解答下吧。'
                     }, {
                         id:23,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/113.jpg',
                         xhaiyao:'在炎炎的夏日中，西瓜是人们最喜欢吃的一种水果，清甜凉爽的感觉，让人非常舒服。但是，有人说吃西瓜会导致肥胖，甚至说，吃一个西瓜就相当于吃了六碗的米饭，这是真的吗？吃西瓜会胖吗?下面就来为大家解答下吧。'
                     }, {
                         id:24,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/129.jpg',
                         xhaiyao:'有鱼有虾'
                     }, {
                         id:21,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/115.jpg',
                         xhaiyao:'有鱼有虾'
                     },  {
                         id:22,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/121.jpg',
                         xhaiyao:'有鱼有虾'
                     }, {
                         id:23,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/112.jpg',
                         xhaiyao:'有鱼有虾'
                     }, {
                         id:24,
                         title:'好吃的',
                         img_url: 'http://img1.3lian.com/img2011/w11/1126/4/d/111.jpg',
                         xhaiyao:'有鱼有虾'
                     }
                 ]
 			
             }
            


         }
          ,created(){
                //  this.getimglist();
                //  this.getimglist(0);//默认加载全部图片
             }
             ,methods:{
                // 获取图片分类数据
                getcate(){
                    let url = common.apihost + '/api/getimgcategory';
                    this.$http.get(url).then(res=>{
                      
                        this.catelist = res.body.message;

                //重新获取ul宽度！动态赋值
                    let ow = 70 * (res.body.message.length + 1);
                    document.getElementById('cateul').style.width = ow + 'px';
                        });


                },
                // 根基分类id获取数据
                getimglist(cateid){
                    //清空一下
                    // this.list = '';
                    // 正在加载中
                    Indicator.open('加载中...');

                    let url = common.apihost + 'api/getimages/' + cateid;
                     this.$http.get(url).then(res=>{
                           //ps:服务起的返回的url的地址路径，需要拼接下服务起图片的前缀
                        let imghost = common.imghost;//云服务器地址
                        // 遍历res.body。message
                        let tmplist = res.body.message;
                        for(let i = 0;i < tmplist.length;i++){
                            tmplist[i].img_url = imghost + tmplist[i].img_url;
                        }
                         this.list = tmplist;
                         //异步回来就关闭正在加载中
                         Indicator.close();
                     });
                    
                }

		 }
 		
}
</script>

<style lang="scss" scoped>

ul, li {
    padding: 0 0;
    margin: 0 0;
    list-style: none;
}
// 图片样式
.imglist img{
width: 100%;
 height: 300px;
}

// 懒加载图片样式
image[lazy=loading] {
  width: 100%;
  height: 300px;
  margin: auto;
}
// 懒加载图片样式end


// 分类样式

.imgbox{
    position: relative;
}
.imgbox p{
    width: 100%;
    padding: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 12px;
    background-color: rgba(0,0,0,0.3)
}
.imgtitle{
    font-weight: 700;
    font-size: 16px;
}





.cate{
    max-width: 400px;
    overflow-x: auto;
    overflow-y: hidden;
}
.cate ul{
    width: 640px;
    padding: 10px 5px;
    margin: 0 0;
 }
.cate li{
    display: inline;
    padding:0 0 0 10px;
}
.cate li a{
    font-size: 14px;
}
</style>
